<%--

  @author yulezhisi
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>服务分析</title>

    <link rel="shortcut icon" href="<c:url value="/images/favicon.ico"/>" type="image/x-icon"/>
    <script src="<c:url value="/js/jquery-1.9.1.min.js"/>"></script>
    <script src="<c:url value="/layui/layui.js"/>"></script>
    <link rel="stylesheet" type="text/css" href="<c:url value="/layui/css/layui.css"/>">

    <script src="<c:url value="/js/echarts.js"/>"></script>
    <script src="<c:url value="/js/my/commons.js"/>"></script>
    <style>
        .container {
            width: 1200px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="layui-tab layui-tab-brief" lay-filter="user">
        <ul class="layui-tab-title" id="LAY_mine">
            <%--按顺序自动绑定选项卡--%>
            <li lay-id="table">表格呈现</li>
            <li lay-id="echarts">图表呈现</li>
        </ul>
        <div class="layui-tab-content" style="padding: 20px 0;">
            <%--选项卡1--%>
            <div class="layui-form layui-form-pane layui-tab-item layui-show">
                <script>
                    layui.use(['table', 'form'], function () {
                        var table = layui.table;
                        table.render({
                            elem: '#tableId'
                            , url: '<c:url value="/count/service.do"/>'
                            , toolbar: '#toolbarDemo'
                            , cols: [[
                                {type: "numbers", title: '序号', width: 200}
                                , {field: 'type', width: 450, title: '服务类型'}
                                , {field: 'count', minwidth: 250, title: '数量'}
                            ]]
                        });
                    });
                </script>
                <table class="layui-hide" id="tableId" lay-filter="table_layui_filter"></table>
            </div>

            <%--选项卡2 图表--%>
            <div class="layui-form layui-form-pane layui-tab-item">
                <script>
                    $(function () {
                        //绑定一个document组件
                        var charts = echarts.init($('#div_bar')[0]);
                        // 图表的配置项和数据
                        var option = {
                            //设置标题
                            title: {
                                text: '服务分析'
                                // , subtext: '副标题'
                            }
                            //悬停的提示
                            , tooltip: {}
                            , toolbox: { //工具箱
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    magicType: {show: true, type: ['line', 'bar']},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            }
                            //对应数据分类的显示开关 与 series.name 一致
                            , legend: {
                                data: ['数量']
                            }

                            //横轴上的列名必要的   list<name>
                            , xAxis: {
                                data: []
                            }
                            , yAxis: {}
                            //数据  list<value>
                            , series: [{
                                //数据的分类名
                                name: '数量'
                                //显示的类型, bar柱状体   pie 饼图...
                                , type: 'bar'
                                , data: ['咨询', '建议', '投诉']

                            }]
                        };

                        /*=====动态加载数据 ====================================================================*/
                        $.ajax({
                            url: '${pageContext.request.contextPath}/count/service.do'  //要求索引对应的   data[list<name>,list<value>]
                            , dataType: 'json'
                            , success: function (data) {
                                var nameList = [];
                                var valueList = [];
                                $.each(data.data, function (index, data) {
                                    nameList.push(data.type);
                                    valueList.push(data.count);
                                });
                                //再次渲染添加数据`
                                charts.setOption({
                                    xAxis:
                                        {
                                            data: nameList
                                        }
                                    , series: [{
                                        name: '数量'
                                        , type: 'bar'
                                        //这里设置对应的数据
                                        , data: valueList
                                    }]

                                })
                            }
                        });

                        // 使用配置项渲染
                        charts.setOption(option);
                    });

                </script>

                <div id="div_bar" style="width: 600px; height: 400px;display: inline-block;"></div>

            </div>

        </div>
    </div>

</div>

</body>
</html>
